<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const trainingLogs = ref([])

const updateTrainingLog = (log, isHighlight = false) => {
  trainingLogs.value.push({
    id: Date.now(),
    content: log,
    isHighlight,
    timestamp: new Date().toLocaleTimeString()
  })
  
  if (trainingLogs.value.length > 100) {
    trainingLogs.value.shift()
  }
}

// 模拟训练日志数据
const generateTestLog = () => {
  const logTypes = [
    { content: '开始加载训练数据...', highlight: true },
    { content: '初始化模型参数...', highlight: false },
    { content: `训练轮次 Epoch ${Math.floor(Math.random() * 100)}, Loss: ${(Math.random() * 0.5).toFixed(4)}`, highlight: false },
    { content: `验证集准确率: ${(85 + Math.random() * 10).toFixed(2)}%`, highlight: true },
    { content: '更新模型权重...', highlight: false },
    { content: `学习率调整为: ${(0.001 * Math.random()).toFixed(6)}`, highlight: false },
    { content: '保存检查点...', highlight: true }
  ]
  
  const randomLog = logTypes[Math.floor(Math.random() * logTypes.length)]
  updateTrainingLog(randomLog.content, randomLog.highlight)
}

let logInterval

onMounted(() => {
  // 立即添加一些初始日志
  updateTrainingLog('系统初始化完成', true)
  updateTrainingLog('加载预训练模型...', false)
  updateTrainingLog('开始云边协同训练', true)
  
  // 设置定时器，每2秒生成一条新日志
  logInterval = setInterval(generateTestLog, 2000)
})

onUnmounted(() => {
  // 组件卸载时清除定时器
  if (logInterval) {
    clearInterval(logInterval)
  }
})
</script>

<template>
  <div class="training-log-container">
    <div class="log-header">
      <span>训练日志</span>
    </div>
    <div class="log-content" ref="logContainer">
      <div
        v-for="log in trainingLogs"
        :key="log.id"
        :class="['log-item', { 'highlight': log.isHighlight }]"
      >
        <span class="log-time">{{ log.timestamp }}</span>
        <span class="log-text">{{ log.content }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.training-log-container {
  position: absolute;
  left: 19%;
  top: 9%;
  width: 15%;
  height: 50%;
  background: linear-gradient(135deg, rgba(62, 172, 180, 0.05) 0%, rgba(9, 196, 202, 0.1) 100%);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(62, 172, 180, 0.2);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 
    0 0 20px rgba(62, 172, 180, 0.1),
    inset 0 0 20px rgba(62, 172, 180, 0.05);
  z-index: 100;

  .log-header {
    margin-top: 8px;
    height: 20px;
    color: #7ecbcf;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 500;
    // margin-bottom: 8px;
    letter-spacing: var(--letter-spacing-base);
  }

  .log-content {
    height: calc(100% - 48px);
    overflow-y: auto;
    padding: 8px;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    
    &::-webkit-scrollbar {
      width: 4px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(62, 172, 180, 0.1);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(62, 172, 180, 0.3);
      border-radius: 3px;
      
      &:hover {
        background: rgba(62, 172, 180, 0.5);
      }
    }
  }

  .log-item {
    margin-bottom: 8px;
    padding: 6px 10px;
    font-size: 0.6rem;
    background: rgba(40, 44, 52, 0.3);
    border-radius: 4px;
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-base);
    color: #fff;
    transition: all 0.3s ease;
    border-left: 2px solid rgba(62, 172, 180, 0.3);
    
    &.highlight {
      background: rgba(242, 151, 1, 0.08);
      border-left: 2px solid rgba(242, 151, 1, 0.6);
      animation: glow 1.5s infinite alternate;
    }

    .log-time {
      color: #65959b;
      margin-right: 10px;
      font-size: 0.55rem;
      font-family: var(--font-family-mono);
      font-weight: 500;
    }

    .log-text {
      color: #a8c1c3;
      font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
      font-weight: 400;
    }
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 3px rgba(242, 151, 1, 0.15);
  }
  to {
    box-shadow: 0 0 6px rgba(242, 151, 1, 0.3);
  }
}
</style> 